<template>
	<view class="page">
		<!-- 聊天 -->
		<com-chat ref="Chat" :roomId="roomId" :encryptDisplay="chatType===4" :showFriendName="chatType!==1"
			:navbarHeight="statusBarHeight+44" :currentUser="userInfo" :chatType="chatType">
			<template slot="navbar">
				<u-navbar bgColor="#fff" fixed placeholder>
					<!-- 导航栏左侧插槽 -->
					<view slot="left" class="navbar-left">
						<view class="navbar-left__back" @tap="navbarLeftClick">
							<u-icon name="arrow-left" color="#1D2129" size="32"></u-icon>
						</view>
						<view class="navbar-left__user">
							<text class="navbar-left__user-title" @tap="showPersons">{{chatTitle}}</text>
							<text v-if="chatType===1" class="navbar-left__user-tag">{{friendObj.onLine|chat-friend-status}}</text>
							<u-icon v-if="chatType!==1&&openId===ownerOpenId" name="edit-pen" size="44rpx" color="#86909C"
								@tap="editRoomName"></u-icon>
						</view>
					</view>
				</u-navbar>
			</template>
		</com-chat>

		<!-- 人员列表弹窗 -->
		<com-person-list ref="PersonList" :title="chatTitle" :showRemoveButton="chatType!==1&&openId===ownerOpenId"
			:showMobile="chatType!==4" :nameField="chatType===4?'nickname':'senderName'"></com-person-list>

		<!-- 修改群聊名称 -->
		<com-update-chatname ref="UpdateChatname" @refresh="updateChatnameHandle"></com-update-chatname>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import ComPersonList from './components/com-person-list.vue'
	import ComUpdateChatname from './components/com-update-chatname.vue'

	export default {
		components: { ComPersonList, ComUpdateChatname },
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				roomId: '',
				chatTitle: '',
				chatType: 1,

				friendObj: {},
				ownerOpenId: '',
			};
		},
		computed: {
			...mapGetters(['userInfo', 'openId']),
		},
		onLoad(option) {
			// console.log(option);
			this.roomId = option.roomId
			this.chatTitle = option.chatTitle
			this.chatType = Number(option.type || '1')

			//查询聊天室人员
			this.getRoomMembers()
		},
		methods: {
			// 点击导航栏左侧
			navbarLeftClick() {
				let pages = getCurrentPages(); // 获取当前页面栈
				if (pages.length > 1) {
					uni.navigateBack()
				} else {
					uni.redirectTo({
						url: '/pages/card/card'
					})
				}
			},
			showPersons() {
				this.$refs.PersonList.show({
					openId: this.openId,
					roomId: this.roomId,
					ownerOpenId: this.ownerOpenId,
				})
			},
			//查询聊天室人员
			async getRoomMembers() {
				let params = {
					openId: this.openId,
					roomId: this.roomId
				}
				let res = await this.$api.goOnline(params)
				if (res.success && res.result.length > 0) {
					// 单聊
					if (this.chatType === 1) {
						let tIndex = res.result.findIndex(it => it.openId !== this.openId)
						if (tIndex > -1) {
							this.friendObj = res.result[tIndex]
						}
					}
					// 群聊、密聊、组局
					if (this.chatType !== 1) {
						let tFilter = res.result.filter(item => item.isOwner)
						if (tFilter.length) {
							this.ownerOpenId = tFilter[0].openId
						}
					}
				}
			},
			// 修改群组名称
			editRoomName() {
				// updateRoomName
				this.$refs.UpdateChatname.show({
					openId: this.openId,
					roomId: this.roomId,
					roomName: this.chatTitle,
				})
			},
			// 修改聊天室名称
			async updateChatnameHandle(e) {
				this.chatTitle = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
	}

	.navbar-left {
		display: flex;
		align-items: center;

		.navbar-left__back {}

		.navbar-left__user {
			margin-left: 20rpx;

			display: flex;
			align-items: center;

			.navbar-left__user-title {
				max-width: 400rpx;
				margin-right: 16rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #1D2129;
				line-height: 44rpx;

				overflow: hidden;
				text-overflow: ellipsis;
			}

			.navbar-left__user-tag {
				display: inline-block;
				height: 28rpx;
				padding: 0 8rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 28rpx;
				background-color: #86909C;
				border-radius: 200rpx;
			}
		}
	}
</style>